<template>
<div class="adoptOrderInfo info-block" v-if="info">
  <div class="info-header">
    <div class="info-status">{{'当前订单状态：' + generateOrderStatus(info.orderStatus)}}</div>
    <div class="info-button">
      <el-upload
        v-if="enableUpload"
        ref="yUpload"
        action=""
        :show-file-list="false"
        :http-request="() => {}"
        :multiple="false"
        :on-change="onUploadChange"
        :limit="1"
        accept="image/*"
        :auto-upload="false">
        <el-button v-if="enableUpload" type="primary" size="mini" @click="$$commonNotice()">上传收款凭证</el-button>
      </el-upload>
      <el-button v-if="enableEnsure" type="primary" size="mini" @click="ensureFinish">确认完成</el-button>
    </div>
  </div>
  <div class="info-content">
    <div class="info-item"
      v-for="(item, index) in templateArray"
      :key="index">
      <div class="info-item-header el-icon-medal">
        {{item.name}}
      </div>
      <el-descriptions :column="item.column || 3" direction="vertical" border>
        <el-descriptions-item
            v-for="(item2, index2) in item.columns"
            :key="index + '_' + index2"
            :span="item2.span || 1">
          <template slot="label">
            {{item2.label}}
          </template>
          <span v-if="!item2.type">
            {{ generateDisplay(item2, item.model) }}
          </span>
          <el-image
            v-else-if="item2.type === 'img' && item.model[item2.prop]"
            style="max-height: 50px; max-width: 50px"
            fit="contain"
            :src="generateMediaUrl({ fileOpenUrl: item.model[item2.prop] })"
            :preview-src-list="[ generateMediaUrl({ fileOpenUrl: item.model[item2.prop] }) ]">
          </el-image>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "adoptOrderInfo",
  inject: ['getEnum', 'generateMediaUrl', 'defaultUploadChange'/*, 'getVarietyName'*/],
  props:{
    orderId: String
  },
  computed:{
    templateArray(){
      let ary = [{
        name: '基本信息',
        column: 4,
        columns: this.columns
      },{
        name: '物品信息',
        model: this.info,
        column: 5,
        columns: this.adoptColumns
      }]
      if(!!this.payInfo){
        ary.push({
          name: '支付信息',
          model: this.payInfo,
          columns: this.paymentColumns
        })
      }
      if(!!this.payProofInfo){
        ary.push({
          name: '付款凭证',
          model: this.payProofInfo,
          columns: this.payProofColumns
        })
      }
      if(!!this.receiveProofInfo){
        ary.push({
          name: '收款凭证',
          model: this.receiveProofInfo,
          columns: this.receiveProofColumns
        })
      }
      return ary;
    },
    enableUpload(){
      //是否可上传收款凭证
      return !!this.payInfo && [this.getEnum('commonPayStatus').WAIT_UPLOAD_RECEIVE_PROOF.value/*, this.getEnum('commonPayStatus').WAIT_CONFIRM.value*/].includes(this.payInfo.payStatus) ;
    },
    enableEnsure(){
      //是否可确认
      return !!this.payInfo && !!this.payProofInfo && !!this.receiveProofInfo && this.getEnum('commonPayStatus').WAIT_CONFIRM.value === this.payInfo.payStatus;
    }
  },
  data(){
    return{
      orderStatusOptions: this.getEnum('orderStatus'),
      info: null,
      payInfo: null,
      payProofInfo: null,
      receiveProofInfo: null,
      columns: [
        {
          label: '订单号',
          prop: 'orderSn'
        },
        {
          label: '下单人',
          prop: 'memberName'
        },
        {
          label: '下单时间',
          prop: 'commitTime',
          formatter(row){
            return (row.commitTime || '').replace('T', ' ');
          }
        },
        {
          label: '订单总金额(元)',
          prop: 'totalAmount'
        },
      ],
      adoptColumns: [
        {
          label: '物品图片',
          prop: 'imgUrl',
          type: 'img'
        },
        {
          label: '物品名称',
          prop: 'adoptName'
        },
        {
          label: '物品规格',
          prop: 'specJson',
          formatter: this.generateKindAndSpec
        },
        {
          label: '单价',
          prop: 'singleAmount'
        },
        {
          label: '数量',
          prop: 'adoptAmount'
        }
      ],
      paymentColumns: [
        {
          label: '支付流水号',
          prop: 'paySn'
        },
        {
          label: '支付状态',
          prop: 'payStatus',
          formatter: (function(row){
            return this.$$getCommonArrayName(row.payStatus, Object.values(this.getEnum('commonPayStatus')))
          }).bind(this)
        },
        {
          label: '支付方式',
          prop: 'payType',
          formatter: (function(row){
            return this.$$getCommonArrayName(row.payType, Object.values(this.getEnum('commonPayType')))
          }).bind(this)
        },
        {
          label: '支付人',
          prop: 'payUserName'
        },
        {
          label: '支付时间',
          prop: 'payTime',
          formatter(row){
            return (row.payTime || '').replace('T', ' ');
          },
          span: 2
        },
        {
          label: '订单总金额(元)',
          prop: 'totalAmount'
        },
        {
          label: '优惠金额(元)',
          prop: 'semAmount',
          formatter({semAmount}){
            return semAmount ? '-' + semAmount : semAmount;
          },
        },
        {
          label: '支付金额(元)',
          prop: 'payAmount'
        }
      ],
      payProofColumns:[
        {
          label: '上传人',
          prop: 'updateUserName'
        },
        {
          label: '上传时间',
          prop: 'updateTime',
          formatter(row){
            return (row.updateTime || '').replace('T', ' ');
          }
        },
        {
          label: '支付凭证',
          prop: 'proofUrl',
          type: 'img'
        }
      ],
      receiveProofColumns:[
        {
          label: '上传人',
          prop: 'updateUserName'
        },
        {
          label: '上传时间',
          prop: 'updateTime',
          formatter(row){
            return (row.updateTime || '').replace('T', ' ');
          }
        },
        {
          label: '收款凭证',
          prop: 'proofUrl',
          type: 'img'
        }
      ]
    }
  },
  created() {
    this.initInfo();
  },
  methods:{
    initInfo(){
      //转账信息
      this.$yAxios({
        url: this.$api.adopt.queryAdoptOrder,
        data:{
          id: this.orderId
        },
        loading: true
      }, info => {
        this.$set(this, 'info', info);
        //规格信息
        this.$yAxios({
          url: this.$api.adopt.queryAdoptSp,
          data:{
            skuId: info.adoptSku,
            adoptId: info.adoptId
          }
        }, info2 => {
          info2.adoptSku && this.$set(this.info, 'specJson', info2.adoptSku.specJson);
          this.$set(this.info, 'kind', info2.adoptInfo.kind);
          this.$set(this.info, 'variety', info2.adoptInfo.variety);
          this.$set(this.info, 'imgUrl', info2.adoptInfo.imgUrl);
        })
        //支付信息
        this.$yAxios({
          url: this.$api.common.queryPaymentRecord,
          data:{
            orderSn: info.orderSn
          },
          loading: true
        }, info3 => {
          info3 && this.$set(this, 'payInfo', Object.assign(info3, info));
        })
        //支付凭证
        this.$yAxios({
          url: this.$api.common.queryPaymentProof,
          data:{
            orderSn: info.orderSn
          },
          loading: true
        }, info4 => {
          if(info4){
            let [payProofAry, receiveProofAry] = [info4.filter(item => item.proofType === this.getEnum('commonPayRecoderProofType').PAY.value),
              info4.filter(item => item.proofType === this.getEnum('commonPayRecoderProofType').RECEIVE.value)];
            if(payProofAry && payProofAry.length){
              this.$set(this, 'payProofInfo', payProofAry[0]);
            }
            if(receiveProofAry && receiveProofAry.length){
              this.$set(this, 'receiveProofInfo', receiveProofAry[0]);
            }
          }
        })
      })
    },
    generateKindAndSpec(row){
      return /*this.getVarietyName(this.info.kind, this.info.variety) + ': ' + */this.generateSpec(row);
    },
    generateSpec(row){
      if(!row.specJson) return '';
      else{
        let specJson = JSON.parse(row.specJson);
        let str = '';
        str += Object.values(specJson).join('；');
        return str;
      }
    },
    generateOrderStatus(orderStatus){
      return this.$$getCommonArrayName(orderStatus, this.orderStatusOptions)
    },
    generateDisplay(row, model = this.info){
      let str = model[row.prop];
      if(row.formatter){
        str = row.formatter(model);
      }
      if(!str && str !== 0){
        str = row.emptyText || '无';
      }
      return str;
    },
    onUploadChange(fileObj){
      if(!fileObj.raw.type.startsWith('image/')){
        this.$message({
          type: 'warning',
          message: '只允许上传图片'
        });
        this.$refs['yUpload'].clearFiles();
        return false;
      }
      this.defaultUploadChange(fileObj, info => {
        this.$yAxios({
          url: this.$api.common.savePaymentProof,
          data: {
            proofId: info.id,
            proofUrl: info.fileOpenUrl,
            orderSn: this.info.orderSn,
            proofType: this.getEnum('commonPayRecoderProofType').RECEIVE.value
          },
          loading: true
        }, () => {
          this.$message({
            type: 'success',
            message: '上传收款凭证成功'
          });
          this.initInfo();
        })
      })
    },
    ensureFinish(){
      this.$yAxios({
        url: this.$api.common.finishPaymentRecord,
        data: {
          id: this.receiveProofInfo.payRecorderId
        },
        loading: true
      }, () => {
        this.$message({
          type: 'success',
          message: '成功确认'
        });
        this.initInfo();
      })
    }
  }
}
</script>

<style scoped lang="less">
.adoptOrderInfo{
  width: 100%;
  height: 100%;
  padding: 20px 20px 0;
}
</style>